@import "../../common/style/common.less";
.bar-3d {
  position: relative;
  canvas {
    position: absolute;
  }
  &--tip {
    position: absolute;
    left: 0;
    top: 0;
    width: 90px;
    height: 35px;
    display: none;
    font-size: 22px;

    &__left {
      position: absolute;
      left: 0;
      width: 50%;
      height: 100%;
      background-color: rgb(59, 126, 247);
      border-radius: 5px 0 0 5px;
      .display-flex(column, center, center);
      color: white;

      &__down {
        position: absolute;
        bottom: -10px;
        right: -10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom: 10px solid rgb(59, 126, 247);
        box-sizing: border-box;
        transform: rotateZ(45deg);
      }
    }
    &__right {
      position: absolute;
      right: 0;
      width: 50%;
      height: 100%;
      background-color: rgb(74, 223, 234);
      border-radius: 0 5px 5px 0;
      .display-flex(column, center, center);
      color: black;

      &__down {
        position: absolute;
        bottom: -10px;
        left: -10px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-bottom: 10px solid rgb(74, 223, 234);;
        box-sizing: border-box;
        transform: rotateZ(-45deg);
      }
    }
  }
}